<template>
  <div class="stay-point">
    <div class="info flex">
      <div>查询时间: {{ time[0] }} ~ {{ time[1] }}</div>

      <div style="margin-left: 10px;">
        总里程: {{ mileage }}KM
      </div>
    </div>
    <div class="info-block">
      <div
        v-if="loading"
        class="loading"
      >
        <VantLoading />
      </div>
      <el-descriptions
        v-else
        :column="1"
        border
      >
        <el-descriptions-item label="操作">
          <el-button
            type="text"
            style="color: #F56C6C;"
            size="mini"
            @click="handleChangeStayPoint('prev')"
          >
            上一个停留点
          </el-button>

          <el-button
            type="text"
            size="mini"
            @click="handleChangeStayPoint('next')"
          >
            下一个停留点
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="停留点">
          停留点{{ stayPoint?.index + 1 >= 10
          ? stayPoint?.index + 1 : `0${stayPoint?.index + 1}` }}
        </el-descriptions-item>

        <el-descriptions-item label="停留时长">
          {{ stayPoint?.timeInterval }}
        </el-descriptions-item>

        <el-descriptions-item label="停留地点">
          {{ stayPoint?.addressParse }}
        </el-descriptions-item>

        <el-descriptions-item label="停留时间">
          {{ stayPoint?.startTime }} ~ {{ stayPoint?.endTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
import { Loading as VantLoading } from 'vant'
import 'vant/lib/loading/style'
export default {
  name: 'StayPointInfo',
  components: {
    VantLoading
  },
  props: {
    stayPoint: {
      type: Object,
      default: () => ({})
    },

    time: {
      type: Array,
      default: () => []
    },

    mileage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false
    }
  },
  watch: {
    stayPoint(val) {
      if (val) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    }
  },
  methods: {
    handleChangeStayPoint(type) {
      this.$emit('change', type)
    }
  }
}
</script>
<style lang="scss" scoped>
.stay-point {
  height: 100%;

  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .info {
    font-size: 14px;
    color: #909399;
  }

  .info-block {
    height: calc(100% - 30px);
    margin-top: 10px;
    overflow-y: auto;
  }
}

</style>
